import React from 'react';
import Taro from '@tarojs/taro';

import * as T from '../types';
import actions from '../actions/index';
import { connect } from 'react-redux';
import { store2Props } from '../selectors';
type IInfoProps = T.IProps & T.IInfoProps;

import { View, Text, ScrollView, Image } from '@tarojs/components';
import orderIcon from '../img/order.png';
import './ReceivingTab.less';

// @ts-ignore
@connect<Partial<IInfoProps>, T.IInfoState>(store2Props, actions)
export default class ReceivingTab extends React.Component<Partial<IInfoProps>, T.IInfoState> {

  // 使用state值
  // constructor(props) {
  //   super(props)
  //   this.state={
  //     test:1
  //   }
  // }

  render() {
    let {
      main: { isLoading, escortSnatchOrderStatus, ReceivingTab },
      actions: { action },
    } = this.props;
    return (
      <View className="componentReceivingTab">
        <ScrollView scrollX>
          <View className="tab">
            {ReceivingTab.map((tabItem, index) => {
              return (
                <View
                  key={index}
                  className="nav"
                  onClick={() => {
                    action.commonChange('main.escortSnatchOrderStatus', tabItem.key);
                    action.commonChange('main.pageNum', 0);
                    action.commonChange('main.pageSize', 10);
                    action.findEscortsnatchorderList()
                  }}
                >
                  <Text className={escortSnatchOrderStatus === tabItem.key ? 'item itemSelected' : 'item'}>
                    {tabItem.label}{tabItem.num > 0 && '(' + tabItem.num + ')'}
                  </Text>
                  <View className="active">
                    {escortSnatchOrderStatus == tabItem.key && <Image className="orderIcon" src={orderIcon} mode="widthFix" />}
                  </View>
                </View>
              );
            })}
          </View>
        </ScrollView>
      </View>
    );
  }
}
